{% extends "base.html" %}

{% block main %}
    <div class="row d-flex align-items-center">
        <div class="col">
            <!--[if IE]><div class="alert alert-danger" role="alert">请在谷歌浏览器中访问该网站!</div><![endif]-->
            <div class="card border-success">
                <div class="card-header text-center text-success">
                    密码规则
                </div>
                <div class="card-body">
                    <blockquote class="blockquote">
                        <!-- 如要修改长度, 请同时修改后面两个正则表达式中数字 8 (?=^.{8,255}$) -->
                        <p class="text-success">*密码长度必须大于8位!</p>
                    </blockquote>
                    <blockquote class="blockquote mb-0">
                        <p class="text-success">*密码中至少包含三类字符!</p>
                        <footer class="blockquote-footer">
                            大写、小写、数字、特殊字符中选取三类或四类
                        </footer>
                        <footer class="blockquote-footer">
                            Example:&emsp;Aa12345678&emsp;abcd@123456
                        </footer>
                    </blockquote>
                    <blockquote class="blockquote">
                        <p class="text-success">*密码不能与最近使用过的密码相同!</p>
                    </blockquote>
                    <!-- 部分域策略限制了密码最短使用时间
                    <blockquote class="blockquote mb-0">
                        <p class="text-success">*密码最短使用期限一天!</p>
                        <footer class="blockquote-footer">
                            密码修改成功后,24小时候后才能再次修改!
                        </footer>
                    </blockquote>
                    -->
                    <blockquote class="blockquote mb-0">
                        <p class="text-success">*密码中不能包含用户名!</p>
                        <footer class="blockquote-footer">
                            如: zhangsan, 密码zhangsan@123不符合
                        </footer>
                    </blockquote>
                </div>
            </div>
        </div>
        <div class="col-md-6 col-xs-12">
            <!--[if IE]><div class="alert alert-danger" role="alert">请在谷歌浏览器中访问该网站!</div><![endif]-->
            <form class="needs-validation" action="javascript:" novalidate>
                <h3 class="text-primary text-center">{{ title }}</h3>
                <div class="form-group">
                    <label for="account">域账号</label>
                    <div class="input-group">
                        <div class="input-group-prepend">
                            <span class="input-group-text fa fa-user" aria-hidden="true"></span>
                        </div>
                        <input type="text" class="form-control" id="account" placeholder="请输入域账号" required>
                        <div class="input-group-append">
                            <span class="input-group-text">@{{ mail_suffix }}</span>
                        </div>
                        <div class="invalid-feedback">
                            请输入正确的账号!
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label for="oldPwd">旧密码</label>
                    <div class="input-group">
                        <div class="input-group-prepend">
                            <span class="input-group-text fa fa-lock" aria-hidden="true"></span>
                        </div>
                        <input type="password" class="form-control" id="oldPwd" placeholder="请输入旧密码" required>
                        <div class="input-group-append">
                            <span class="input-group-text fa fa-eye-slash eye" aria-hidden="true"></span>
                        </div>
                        <div class="invalid-feedback">
                            请输入旧密码!
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label for="newPwd">新密码</label>
                    <div class="input-group">
                        <div class="input-group-prepend">
                            <span class="input-group-text fa fa-lock" aria-hidden="true"></span>
                        </div>
                        <input type="password" class="form-control" id="newPwd" placeholder="请输入新密码"
                               pattern="(?=^.{8,255}$)((?=.*\d)(?=.*[A-Z])(?=.*[a-z])|(?=.*\d)(?=.*[^A-Za-z0-9])(?=.*[a-z])|(?=.*[^A-Za-z0-9])(?=.*[A-Z])(?=.*[a-z])|(?=.*\d)(?=.*[A-Z])(?=.*[^A-Za-z0-9]))^.*"
                               required>
                        <div class="input-group-append">
                            <span class="input-group-text fa fa-eye-slash eye" aria-hidden="true"></span>
                        </div>
                        <div class="invalid-feedback">
                            请输入符合复杂度要求的新密码!
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label for="newPwdRepeat">重复新密码</label>
                    <div class="input-group">
                        <div class="input-group-prepend">
                            <span class="input-group-text fa fa-lock" aria-hidden="true"></span>
                        </div>
                        <input type="password" class="form-control" id="newPwdRepeat" placeholder="请重复输入新密码"
                               pattern="(?=^.{8,255}$)((?=.*\d)(?=.*[A-Z])(?=.*[a-z])|(?=.*\d)(?=.*[^A-Za-z0-9])(?=.*[a-z])|(?=.*[^A-Za-z0-9])(?=.*[A-Z])(?=.*[a-z])|(?=.*\d)(?=.*[A-Z])(?=.*[^A-Za-z0-9]))^.*"
                               required>
                        <div class="input-group-append">
                            <span class="input-group-text fa fa-eye-slash eye" aria-hidden="true"></span>
                        </div>
                        <div class="invalid-feedback">
                            请正确地重复输入符合复杂度要求的新密码!
                        </div>
                    </div>
                </div>
                <button class="btn btn-primary btn-block" type="submit">提交修改</button>
            </form>
        </div>
    </div>
    <style>
        .invalid-feedback {
            margin-left: 40px;
        }
    </style>
{% endblock %}

{% block script %}
    <script>
        toastr.options.closeButton = true;
        toastr.options.timeOut = 5000;
        toastr.options.progressBar = true;
        toastr.options.positionClass = 'toast-top-center';
        let $form = $('form');
        let $account = $('#account');
        let $oldPwd = $('#oldPwd');
        let $newPwd = $('#newPwd');
        let $newPwdRepeat = $('#newPwdRepeat');

        $(document).ready(function () {
            $form.submit(function (e) {
                e.preventDefault();
                $form.addClass('was-validated');
                if ($newPwd.val() !== $newPwdRepeat.val()) {
                    toastr.error('两次输入的新密码不一致!');
                    $form.removeClass('was-validated');
                    $newPwdRepeat.focus();
                    return false;
                }
                if ($form[0].checkValidity() === false) {
                    return false;
                }
                // ajax post 提交登陆信息
                $.post('/', {
                        'account': $account.val(),
                        'oldPwd': $oldPwd.val(),
                        'newPwd': $newPwd.val(),
                        'newPwdRepeat': $newPwdRepeat.val()
                    },
                    function (data) {
                        if (data['err'] === 0) {
                            toastr.success('密码修改成功!');
                            $form[0].reset();
                        } else {
                            toastr.error(data['msg']);
                        }
                    }
                )
                    .fail(function () {
                        toastr.error('提交失败,服务器故障!');
                    })
                    .always(function () {
                        $form.removeClass('was-validated');
                    });
                // ajax post 提交登陆信息 结束
            });
        });

        // 绑定显示密码事件
        let $eye = $('.eye');
        $eye.mousedown(function () {
            $(this).removeClass('fa-eye-slash');
            $(this).addClass('fa-eye');
            $(this).parent().parent().children('input').attr('type', 'text');

        });
        $eye.mouseup(function () {
            $(this).removeClass('fa-eye');
            $(this).addClass('fa-eye-slash');
            $(this).parent().parent().children('input').attr('type', 'password');
        });
    </script>
{% endblock %}